<template>
  <van-nav-bar 
    :title="navTitle" 
    :left-arrow="leftArrow" 
    :left-text="leftText" 
    :right-text="rightText" 
    :border="border" 
    :fixed="fixed" 
    :placeholder="placeholder" 
    :z-index="zIndex" 
    @click-left="onLeft" 
    @click-right="onRight"
  >
    <template #left>
      <slot name="left"></slot>
    </template>
    <template #title>
      <slot name="title"></slot>
    </template>
    <template #right>
      <slot name="right"></slot>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    title: {
      type: String,
      default: ''
    },
    leftArrowBack: { // 返回按钮是否进行返回操作
      type: Boolean,
      default: true
    },
    leftArrow: {
      type: Boolean,
      default: true
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    },
    fixed: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: [Number, String],
      default: 88
    },
  },
  computed: {
    navTitle() {
      if (this.title) return this.title

      return (this.$route.meta && this.$route.meta.title) || ''
    }
  },
  methods: {
    onLeft() {
      if (this.leftArrowBack) {
        this.$router.go(-1)
      } else {
        this.$emit('click-left')
      }
    },
    onRight() {
      this.$emit('click-right')
    }
  },
}
</script>